<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      button {
        width: 100px;
        height: 50px;
        font-size: 22px;
      }
      div {
        width: 300px;
        height: 300px;
        margin: 30px 0;
        background-color: skyblue;
      }
      .current {
        background-color: yellowgreen;
      }
    </style>
    <script src="./jquery.min.js"></script>
    <script>
      $(function () {
        //   （1）类操作
        $("button:first").click(function () {
          $("div").toggleClass("current");
        });
        // （2）css（）操作
        // background-color这个得到的是rgb格式
        $("button:eq(1)").click(function () {
          if ($("div").css("background-color") === "rgb(135, 206, 235)") {
            $("div").css("background-color", "green");
          } else {
            $("div").css("background-color", "rgb(135, 206, 235)");
          }
        });
      });
    </script>
  </head>
  <body>
    <button>切换1</button>
    <button>切换2</button>
    <button>切换3</button>
    <div>牡丹虽好空入目，枣花最小结实诚;</div>
  </body>
</html>
